<template>
  <div class="prediction-overview">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>预测总览</h1>
      <p>展示未来7天电力负荷预测结果，支持多种模型选择和可视化分析</p>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 左上：预测配置 -->
      <div class="prediction-config">
        <h3>预测配置</h3>
        
        <!-- 模型选择 -->
        <div class="form-group">
          <label>选择模型：</label>
          <Select v-model="selectedModel" placeholder="请选择预测模型">
            <Option value="lightgbm">LightGBM</Option>
            <Option value="xgboost">XGBoost</Option>
            <Option value="mlp">MLP多层感知机</Option>
            <Option value="ensemble">加权混合模型</Option>
          </Select>
        </div>

        <!-- 日期选择 -->
        <!-- <div class="form-group">
          <label>预测日期：</label>
          <DatePicker 
            v-model="targetDate" 
            type="date" 
            placeholder="选择预测日期"
            :options="dateOptions"
            format="yyyy-MM-dd"
            transfer
          />
        </div> -->

        <!-- 操作按钮 -->
        <div class="action-buttons">
          <Button type="primary" @click="startPrediction" :loading="loading">
            <Icon type="ios-flash" />
            开始预测
          </Button>
          <Button @click="clearResults">
            <Icon type="ios-trash" />
            清空结果
          </Button>
        </div>
      </div>

      <!-- 右上：预测结果概览 -->
      <div class="prediction-results">
        <div class="result-header">
          <h3>预测结果概览</h3>
          <!-- <div class="weather-info" v-if="weatherInfo"> -->
            <!-- <div class="weather-item">
              <span class="weather-label">温度：</span>
              <span class="weather-value">{{ weatherInfo.t_max }}°C / {{ weatherInfo.t_min }}°C</span>
            </div>
            <div class="weather-item">
              <span class="weather-label">湿度：</span>
              <span class="weather-value">{{ weatherInfo.humidity }}%</span>
            </div>
            <div class="weather-item">
              <span class="weather-label">降雨量：</span>
              <span class="weather-value">{{ weatherInfo.precip }}mm</span>
            </div>
          </div> -->
        </div>
        
        <div class="load-metrics" v-if="predictionResults.length > 0">
          <!-- 负荷指标 -->
          <div class="metric-box">
            <div class="metric-icon">
              <Icon type="ios-analytics" />
            </div>
            <div class="metric-value">{{ predictionResults[0]?.avgLoad || '--' }}</div>
            <div class="metric-label">平均负荷</div>
          </div>
          <div class="metric-box">
            <div class="metric-icon">
              <Icon type="ios-trending-up" />
            </div>
            <div class="metric-value">{{ predictionResults[0]?.maxLoad || '--' }}</div>
            <div class="metric-label">峰值负荷</div>
          </div>
          <div class="metric-box">
            <div class="metric-icon">
              <Icon type="ios-trending-down" />
            </div>
            <div class="metric-value">{{ predictionResults[0]?.minLoad || '--' }}</div>
            <div class="metric-label">谷值负荷</div>
          </div>
          <div class="metric-box">
            <div class="metric-icon">
              <Icon type="ios-pulse" />
            </div>
            <div class="metric-value">{{ loadVariation || '--' }}</div>
            <div class="metric-label">负荷波动</div>
          </div>
          
          <!-- 气象指标 -->
          <div class="metric-box weather-metric">
            <div class="metric-icon">
              <Icon type="ios-thermometer" />
            </div>
            <div class="metric-value">{{ weatherInfo?.t_max || '--' }}°C</div>
            <div class="metric-label">最高温度</div>
          </div>
          <div class="metric-box weather-metric">
            <div class="metric-icon">
              <Icon type="ios-thermometer-outline" />
            </div>
            <div class="metric-value">{{ weatherInfo?.t_min || '--' }}°C</div>
            <div class="metric-label">最低温度</div>
          </div>
          <div class="metric-box weather-metric">
            <div class="metric-icon">
              <Icon type="ios-partly-sunny" />
            </div>
            <div class="metric-value">{{ avgTemperature || '--' }}°C</div>
            <div class="metric-label">平均温度</div>
          </div>
          <div class="metric-box weather-metric">
            <div class="metric-icon">
              <Icon type="ios-water" />
            </div>
            <div class="metric-value">{{ weatherInfo?.humidity || '--' }}%</div>
            <div class="metric-label">相对湿度</div>
          </div>
        </div>
      </div>

      <!-- 左下：气象影响分析 -->
      <div class="weather-analysis">
        <h3>气象影响分析</h3>
        <div class="analysis-content" v-if="weatherAnalysis">
          <!-- 基础影响程度 -->
          <div class="analysis-section">
            <h4>影响程度评估</h4>
            <div class="weather-item">
              <span class="weather-label">温度影响：</span>
              <span class="weather-value" :class="getImpactClass(weatherAnalysis.temperatureImpact)">
                {{ weatherAnalysis.temperatureImpact }}
              </span>
            </div>
            <div class="weather-item">
              <span class="weather-label">湿度影响：</span>
              <span class="weather-value" :class="getImpactClass(weatherAnalysis.humidityImpact)">
                {{ weatherAnalysis.humidityImpact }}
              </span>
            </div>
            <div class="weather-item">
              <span class="weather-label">降水影响：</span>
              <span class="weather-value" :class="getImpactClass(weatherAnalysis.precipitationImpact)">
                {{ weatherAnalysis.precipitationImpact }}
              </span>
            </div>
            <div class="weather-item">
              <span class="weather-label">风速影响：</span>
              <span class="weather-value" :class="getImpactClass(weatherAnalysis.windSpeedImpact)">
                {{ weatherAnalysis.windSpeedImpact }}
              </span>
            </div>
          </div>
          
          <!-- 特征重要性分析 -->
          <div class="analysis-section" v-if="featureImportanceAnalysis">
            <h4>特征重要性分析</h4>
            <div class="importance-chart">
              <div class="importance-item">
                <span class="importance-label">最高温度</span>
                <div class="importance-bar">
                  <div class="importance-fill" :style="{ width: getImportanceWidth('temp_max') }"></div>
                </div>
                <span class="importance-value">{{ getImportanceValue('temp_max') }}%</span>
              </div>
              <div class="importance-item">
                <span class="importance-label">最低温度</span>
                <div class="importance-bar">
                  <div class="importance-fill" :style="{ width: getImportanceWidth('temp_min') }"></div>
                </div>
                <span class="importance-value">{{ getImportanceValue('temp_min') }}%</span>
              </div>
              <div class="importance-item">
                <span class="importance-label">新格式最高温度</span>
                <div class="importance-bar">
                  <div class="importance-fill" :style="{ width: getImportanceWidth('weather_temp_max') }"></div>
                </div>
                <span class="importance-value">{{ getImportanceValue('weather_temp_max') }}%</span>
              </div>
              <div class="importance-item">
                <span class="importance-label">相对湿度</span>
                <div class="importance-bar">
                  <div class="importance-fill" :style="{ width: getImportanceWidth('humidity') }"></div>
                </div>
                <span class="importance-value">{{ getImportanceValue('humidity') }}%</span>
              </div>
            </div>
          </div>
          
        </div>
        <div class="no-data" v-else>
          <p>暂无气象分析数据</p>
        </div>
        
        <!-- 评估方法表 - 总是显示 -->
        <div class="analysis-section">
          <!-- <h4>影响程度分类</h4> -->
          <div class="impact-classification">
            <div class="classification-description">
              <Icon type="ios-information-circle" />
              根据特征重要性分数自动判断气象因素的影响程度
            </div>
            <div class="classification-table">
              <table>
                <!-- <thead>
                  <tr>
                    <th>
                      <Icon type="ios-flag" />
                      影响等级
                    </th>
                    <th>
                      <Icon type="ios-analytics" />
                      特征重要性分数
                    </th>
                    <th>
                      <Icon type="ios-pulse" />
                      影响程度
                    </th>
                  </tr>
                </thead> -->
                <tbody>
                  <tr class="high-impact">
                    <td>
                      <div class="impact-badge high">
                        <Icon type="ios-flash" />
                        高影响
                      </div>
                    </td>
                    <td>
                      <span class="score-badge high">> 15%</span>
                    </td>
                    <td>显著影响负荷预测</td>
                  </tr>
                  <tr class="medium-impact">
                    <td>
                      <div class="impact-badge medium">
                        <Icon type="ios-arrow-up" />
                        中等
                      </div>
                    </td>
                    <td>
                      <span class="score-badge medium">8-15%</span>
                    </td>
                    <td>中等程度影响</td>
                  </tr>
                  <tr class="low-impact">
                    <td>
                      <div class="impact-badge low">
                        <Icon type="ios-arrow-down" />
                        较低
                      </div>
                    </td>
                    <td>
                      <span class="score-badge low">3-8%</span>
                    </td>
                    <td>轻微影响</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      <!-- 右下：96点电力负荷预测曲线 -->
      <div class="prediction-chart">
        <div class="chart-header">
          <h3>96点电力负荷预测曲线</h3>
          <div class="chart-controls">
            <Button size="small" @click="exportData">
              <Icon type="ios-download" />
              导出数据
            </Button>
          </div>
        </div>
        <div id="loadChart" class="chart-content"></div>
      </div>
    </div>
    
    <!-- 预测历史记录区域 -->
    <div class="prediction-history-section">
      <PredictionSummary />
    </div>
  </div>
</template>

<script>
import { Message } from 'view-design'
import * as echarts from 'echarts'
import { predictionAPI } from '@/utils/api'
import PredictionSummary from './PredictionSummary'

export default {
  name: 'PredictionOverview',
  components: {
    PredictionSummary
  },
  data() {
    return {
      selectedModel: '',
      targetDate: (() => {
        const today = new Date()
        const year = today.getFullYear()
        const month = String(today.getMonth() + 1).padStart(2, '0')
        const day = String(today.getDate()).padStart(2, '0')
        return `${year}-${month}-${day}`
      })(),
      loading: false,
      chart: null,
      predictionResults: [],
      weatherInfo: null,
      modelMetrics: null,
      weatherAnalysis: null,
      featureImportanceAnalysis: null,
      analysisSummary: null,
      dateOptions: {
        disabledDate(date) {
          // 允许选择今天及之后7天
          const today = new Date()
          today.setHours(0, 0, 0, 0)
          const maxDate = new Date(today)
          maxDate.setDate(today.getDate() + 6)
          maxDate.setHours(23, 59, 59, 999)
          // 只禁用今天之前的日期和7天之后的日期
          return date < today || date > maxDate
        }
      }
    }
  },
  computed: {
    loadVariation() {
      if (this.predictionResults.length > 0) {
        const result = this.predictionResults[0]
        if (result.maxLoad && result.minLoad) {
          return Math.round((result.maxLoad - result.minLoad) * 100) / 100 + ' MW'
        }
      }
      return null
    },
    avgTemperature() {
      if (this.weatherInfo && this.weatherInfo.t_max && this.weatherInfo.t_min) {
        return Math.round((this.weatherInfo.t_max + this.weatherInfo.t_min) / 2 * 10) / 10
      }
      return null
    }
  },
  mounted() {
    // 等待DOM完全渲染后再初始化图表
    this.$nextTick(() => {
      setTimeout(() => {
        this.initChart()
      }, 100) // 给一点时间确保容器尺寸计算完成
    })
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
    }
  },
  methods: {
    async startPrediction() {
      if (!this.targetDate || !this.selectedModel) {
        Message.error('请选择预测日期和模型')
        return
      }
      this.loading = true
      try {
        // 修正：确保targetDate为YYYY-MM-DD格式
        let dateStr = ''
        if (typeof this.targetDate === 'string') {
          dateStr = this.targetDate.slice(0, 10)
        } else if (this.targetDate instanceof Date) {
          // 修复时区问题，使用本地时间而不是UTC时间
          const year = this.targetDate.getFullYear()
          const month = String(this.targetDate.getMonth() + 1).padStart(2, '0')
          const day = String(this.targetDate.getDate()).padStart(2, '0')
          dateStr = `${year}-${month}-${day}`
        } else if (this.targetDate && this.targetDate.format) {
          dateStr = this.targetDate.format('YYYY-MM-DD')
        } else {
          dateStr = String(this.targetDate).slice(0, 10)
        }
        const params = {
          target_date: dateStr,
          model: this.selectedModel
        }
        
        console.log('🔍 预测参数:', params)
        const response = await predictionAPI.getSingleDayPrediction(params)
        console.log('🔍 预测响应:', response)
        
        if (response && response.success) {
          this.predictionResults = response.prediction_results
          this.weatherInfo = response.weather_info
          this.modelMetrics = response.model_metrics
          this.weatherAnalysis = response.weather_analysis
          this.featureImportanceAnalysis = response.feature_importance_analysis
          this.analysisSummary = response.analysis_summary
          
          // 确保有预测数据时才更新图表
          if (response.prediction_results && response.prediction_results.length > 0) {
            const predictionData = response.prediction_results[0]
            console.log('🔍 预测数据:', predictionData)
            console.log('🔍 预测值数组:', predictionData.prediction_values)
            
            this.$nextTick(() => {
              this.updateChart(predictionData)
            })
          } else {
            console.warn('⚠️ 没有预测数据')
          }
          
          Message.success('预测完成')
        } else {
          Message.error('预测失败：' + (response.message || '未知错误'))
        }
      } catch (error) {
        console.error('预测失败:', error)
        Message.error('预测失败，请检查网络连接')
      } finally {
        this.loading = false
      }
    },
    
    clearResults() {
      this.predictionResults = []
      this.weatherInfo = null
      this.modelMetrics = null
      this.weatherAnalysis = null
      this.featureImportanceAnalysis = null
      this.analysisSummary = null
      this.chart && this.chart.clear()
    },
    
    initChart() {
      const chartDom = document.getElementById('loadChart')
      if (!chartDom) {
        console.error('找不到图表容器 #loadChart')
        return
      }
      
      // 确保容器有尺寸
      if (chartDom.offsetWidth === 0 || chartDom.offsetHeight === 0) {
        console.warn('图表容器尺寸为0，等待DOM更新...')
        this.$nextTick(() => {
          this.initChart()
        })
        return
      }
      
      console.log('初始化图表，容器尺寸:', chartDom.offsetWidth, 'x', chartDom.offsetHeight)
      
      try {
        this.chart = echarts.init(chartDom)
        // 生成24小时时间标签（每15分钟一个点，共96个点）
        const timeLabels = []
        for (let i = 0; i < 96; i++) {
          const hour = Math.floor(i / 4)
          const minute = (i % 4) * 15
          const timeStr = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`
          timeLabels.push(timeStr)
        }
        
        this.chart.setOption({
          tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(7, 19, 50, 0.9)',
            borderColor: '#1a3c58',
            textStyle: {
              color: '#fff'
            },
            formatter: function(params) {
              let result = params[0].axisValue + '<br/>'
              params.forEach(param => {
                result += `${param.marker}${param.seriesName}: ${param.value.toFixed(2)} MW<br/>`
              })
              return result
            }
          },
          legend: {
            data: ['预测值', '实际值'],
            textStyle: {
              color: '#999'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '8%', // 增加底部空间以容纳旋转的标签
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: timeLabels,
            axisLine: {
              lineStyle: {
                color: '#1a3c58'
              }
            },
            axisLabel: {
              color: '#999',
              rotate: 45, // 旋转45度
              interval: 3, // 每4个点显示一个标签（每小时显示一次）
              formatter: function(value, index) {
                // 只显示整点时间
                if (index % 4 === 0) {
                  return value
                }
                return ''
              }
            }
          },
          yAxis: {
            type: 'value',
            name: '负荷(MW)',
            nameTextStyle: {
              color: '#999'
            },
            axisLine: {
              lineStyle: {
                color: '#1a3c58'
              }
            },
            axisLabel: {
              color: '#999',
              formatter: function(value) {
                return value.toFixed(0)
              }
            },
            splitLine: {
              lineStyle: {
                color: '#1a3c58'
              }
            }
          },
          series: []
        })
        
        console.log('✅ 图表初始化成功')
        
        // 监听窗口大小变化
        window.addEventListener('resize', () => {
          if (this.chart) {
            this.chart.resize()
          }
        })
        
      } catch (error) {
        console.error('❌ 图表初始化失败:', error)
      }
    },
    
    updateChart(data) {
      console.log('🔍 updateChart被调用，数据:', data)
      
      if (!this.chart || !data) {
        console.warn('图表或数据不可用:', { chart: !!this.chart, data: !!data })
        return
      }
      
      // 验证数据格式
      if (!data.prediction_values || !Array.isArray(data.prediction_values)) {
        console.error('预测数据格式错误:', data)
        return
      }
      
      // 数据清理和验证
      const predictionValues = data.prediction_values.map(val => {
        const numVal = parseFloat(val)
        if (isNaN(numVal)) {
          console.warn('发现NaN值，替换为0:', val)
          return 0
        }
        // 如果值异常（负值或过大），进行限制
        if (numVal < 0) {
          console.warn('发现负值，限制为0:', numVal)
          return 0
        }
        if (numVal > 20000) {
          console.warn('发现过大值，限制为20000:', numVal)
          return 20000
        }
        return numVal
      })
      
      console.log('清理后的预测数据:', {
        数量: predictionValues.length,
        范围: Math.min(...predictionValues) + ' - ' + Math.max(...predictionValues),
        前5个值: predictionValues.slice(0, 5)
      })
      
      // 计算数据范围，调整纵轴使曲线变化幅度更大
      const minValue = Math.min(...predictionValues)
      const maxValue = Math.max(...predictionValues)
      const range = maxValue - minValue
      const padding = range * 0.1 // 上下各留10%的边距
      
      // 生成24小时时间标签（每15分钟一个点，共96个点）
      const timeLabels = []
      for (let i = 0; i < 96; i++) {
        const hour = Math.floor(i / 4)
        const minute = (i % 4) * 15
        const timeStr = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`
        timeLabels.push(timeStr)
      }
      
      const series = [{
        name: '预测值',
        type: 'line',
        data: predictionValues,
        smooth: true,
        lineStyle: {
          color: '#75deef',
          width: 2
        },
        itemStyle: {
          color: '#75deef'
        },
        symbol: 'circle',
        symbolSize: 4
      }]
      
      if (data.actual_values && data.actual_values.length > 0) {
        const actualValues = data.actual_values.map(val => {
          const numVal = parseFloat(val)
          return isNaN(numVal) ? 0 : Math.max(0, numVal)
        })
        
        series.push({
          name: '实际值',
          type: 'line',
          data: actualValues,
          smooth: true,
          lineStyle: {
            color: '#4ecdc4',
            width: 2
          },
          itemStyle: {
            color: '#4ecdc4'
          },
          symbol: 'circle',
          symbolSize: 4
        })
      }
      
      try {
        this.chart.setOption({
          xAxis: {
            type: 'category',
            data: timeLabels,
            axisLine: {
              lineStyle: {
                color: '#1a3c58'
              }
            },
            axisLabel: {
              color: '#999',
              rotate: 45, // 旋转45度
              interval: 3, // 每4个点显示一个标签（每小时显示一次）
              formatter: function(value, index) {
                // 只显示整点时间
                if (index % 4 === 0) {
                  return value
                }
                return ''
              }
            }
          },
          yAxis: {
            type: 'value',
            name: '负荷(MW)',
            nameTextStyle: {
              color: '#999'
            },
            min: Math.max(0, minValue - padding),
            max: maxValue + padding,
            axisLine: {
              lineStyle: {
                color: '#1a3c58'
              }
            },
            axisLabel: {
              color: '#999',
              formatter: function(value) {
                return value.toFixed(0)
              }
            },
            splitLine: {
              lineStyle: {
                color: '#1a3c58'
              }
            }
          },
          series: series
        })
        console.log('✅ 图表更新成功，纵轴范围:', minValue - padding, '到', maxValue + padding)
      } catch (error) {
        console.error('❌ 图表更新失败:', error)
      }
    },
    
    exportData() {
      if (this.predictionResults.length === 0) {
        Message.warning('没有可导出的数据')
        return
      }
      
      const headers = ['日期', '时间点', '预测值(MW)', '实际值(MW)']
      let csvContent = headers.join(',') + '\n'
      
      this.predictionResults.forEach(result => {
        if (result.prediction_values) {
          result.prediction_values.forEach((value, index) => {
            const timePoint = String(index + 1).padStart(2, '0')
            const actualValue = result.actual_values ? result.actual_values[index] || '' : ''
            csvContent += `${result.date},${timePoint},${value},${actualValue}\n`
          })
        }
      })
      
      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
      const url = URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.href = url
      link.download = `prediction_${this.targetDate}_${this.selectedModel}.csv`
      link.click()
      URL.revokeObjectURL(url)
    },

    getImpactClass(impact) {
      if (impact === '高') return 'high'
      if (impact === '中等') return 'medium'
      if (impact === '较低' || impact === '低') return 'low'
      return ''
    },

    getImportanceWidth(feature) {
      if (this.featureImportanceAnalysis && this.featureImportanceAnalysis.feature_importance) {
        const importance = this.featureImportanceAnalysis.feature_importance[feature] || 0
        return `${Math.min(importance, 100)}%`
      }
      return '0%'
    },

    getImportanceValue(feature) {
      if (this.featureImportanceAnalysis && this.featureImportanceAnalysis.feature_importance) {
        return this.featureImportanceAnalysis.feature_importance[feature] || 0
      }
      return 0
    },

    getFactorName(factor) {
      const factorMap = {
        'temp_max': '最高温度',
        'temp_min': '最低温度', 
        'weather_temp_max': '新格式最高温度',
        'weather_temp_min': '新格式最低温度',
        'humidity': '相对湿度'
      }
      return factorMap[factor] || factor
    }
  }
}
</script>

<style lang="less" scoped>
.prediction-overview {
  width: 100%;
  min-height: 120vh;
  background: transparent;
  color: #fff;
  
  .page-header {
    text-align: center;
    margin-bottom: 40px;
    
    h1 {
      color: #75deef;
      font-size: 36px;
      font-weight: bold;
      margin-bottom: 15px;
      text-shadow: 0 0 20px rgba(117, 222, 239, 0.5);
    }
    
    p {
      color: #999;
      font-size: 18px;
      margin: 0;
    }
  }
  
      .main-content {
      display: grid;
      grid-template-columns: 1fr 3fr;
      grid-template-rows: 1fr 1fr;
      gap: 30px;
      max-width: 1400px;
      margin: 0 auto;
      height: 800px;
    
    // 左上：预测配置
    .prediction-config {
      background: rgba(7, 19, 50, 0.6);
      border: 1px solid #1a3c58;
      border-radius: 12px;
      padding: 30px;
      backdrop-filter: blur(10px);
      
      h3 {
        color: #75deef;
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 30px;
        text-align: center;
      }
      
      .form-group {
        margin-bottom: 25px;
        
        label {
          display: block;
          color: #999;
          font-size: 16px;
          margin-bottom: 15px;
          font-weight: 500;
        }
        
        :deep(.ivu-select),
        :deep(.ivu-date-picker) {
          width: 100%;
          
          .ivu-select-selection,
          .ivu-input {
            background: rgba(7, 19, 50, 0.5);
            border-color: #1a3c58;
            color: #fff;
            height: 40px;
            
            &:hover {
              border-color: #75deef;
            }
            
            &:focus {
              border-color: #75deef;
              box-shadow: 0 0 0 2px rgba(117, 222, 239, 0.2);
            }
          }
          
          .ivu-select-arrow {
            color: #999;
          }
        }
      }
      
      .action-buttons {
        display: flex;
        gap: 15px;
        margin-top: 30px;
        
        :deep(.ivu-btn) {
          flex: 1;
          height: 40px;
          
          &.ivu-btn-primary {
            background: linear-gradient(45deg, #75deef, #4ecdc4);
            border: none;
            
            &:hover {
              background: linear-gradient(45deg, #5bc0de, #3bb3a6);
            }
          }
          
          &.ivu-btn-default {
            background: rgba(153, 153, 153, 0.2);
            border-color: #999;
            color: #999;
            
            &:hover {
              background: rgba(153, 153, 153, 0.3);
              border-color: #bbb;
              color: #bbb;
            }
          }
        }
      }
    }
    
    // 右上：预测结果概览
    .prediction-results {
      background: rgba(7, 19, 50, 0.6);
      border: 1px solid #1a3c58;
      border-radius: 12px;
      padding: 30px;
      backdrop-filter: blur(10px);
      
      .result-header {
        margin-bottom: 20px;
        
        h3 {
          color: #75deef;
          font-size: 20px;
          font-weight: bold;
          margin-bottom: 15px;
          text-align: center;
        }
        
        .weather-info {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 10px;
          font-size: 12px;
          
          .weather-item {
            display: flex;
            align-items: center;
            gap: 5px;
            
            .weather-label {
              color: #999;
            }
            
            .weather-value {
              color: #4ecdc4;
              font-weight: bold;
            }
          }
        }
      }
      
      .load-metrics {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 15px;
        
        .metric-box {
          background: rgba(7, 19, 50, 0.4);
          border: 1px solid #1a3c58;
          border-radius: 8px;
          padding: 15px;
          text-align: center;
          transition: all 0.3s ease;
          
          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(117, 222, 239, 0.2);
          }
          
          .metric-icon {
            text-align: center;
            margin-bottom: 10px;
            
            :deep(.ivu-icon) {
              font-size: 24px;
              color: #75deef;
            }
          }
          
          .metric-value {
            color: #4ecdc4;
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 5px;
          }
          
          .metric-label {
            color: #999;
            font-size: 12px;
          }
          
          &.weather-metric {
            .metric-icon :deep(.ivu-icon) {
              color: #26d0ce;
            }
            
            .metric-value {
              color: #26d0ce;
            }
          }
        }
      }
    }
    
    // 左下：气象影响分析
    .weather-analysis {
      background: rgba(7, 19, 50, 0.6);
      border: 1px solid #1a3c58;
      border-radius: 12px;
      padding: 30px;
      backdrop-filter: blur(10px);
      
      h3 {
        color: #75deef;
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 20px;
        text-align: center;
      }
      
      .analysis-content {
        display: grid;
        gap: 15px;
        
        .analysis-section {
          background: rgba(7, 19, 50, 0.4);
          border: 1px solid #1a3c58;
          border-radius: 8px;
          padding: 15px;
          margin-bottom: 15px;
          
          h4 {
            color: #75deef;
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
            text-align: center;
          }
          
          .weather-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            
            .weather-label {
              color: #999;
              font-size: 14px;
            }
            
            .weather-value {
              color: #4ecdc4;
              font-size: 14px;
              font-weight: bold;
              &.high {
                color: #26d0ce;
              }
              &.medium {
                color: #75deef;
              }
              &.low {
                color: #999;
              }
            }
          }

          .importance-chart {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-top: 10px;

            .importance-item {
              display: flex;
              flex-direction: column;
              align-items: center;
              gap: 5px;

              .importance-label {
                color: #999;
                font-size: 12px;
              }

              .importance-bar {
                width: 100%;
                height: 8px;
                background-color: #1a3c58;
                border-radius: 4px;
                overflow: hidden;
              }

              .importance-fill {
                height: 100%;
                border-radius: 4px;
                background: linear-gradient(to right, #75deef, #4ecdc4);
              }

              .importance-value {
                color: #999;
                font-size: 12px;
              }
            }
          }

          .summary-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            
            .summary-label {
              color: #999;
              font-size: 14px;
            }
            
            .summary-value {
              color: #4ecdc4;
              font-size: 14px;
              font-weight: bold;
              &.high {
                color: #26d0ce;
              }
              &.medium {
                color: #75deef;
              }
              &.low {
                color: #999;
              }
            }
          }
          
          .impact-classification {
            margin-top: 15px;
            padding: 20px;
            background: rgba(7, 19, 50, 0.4);
            border: 1px solid #1a3c58;
            border-radius: 12px;
            text-align: center;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

            .classification-description {
              color: #999;
              font-size: 14px;
              margin-bottom: 20px;
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 8px;
              
              :deep(.ivu-icon) {
                color: #75deef;
                font-size: 16px;
              }
            }

            .classification-table {
              table {
                width: 100%;
                border-collapse: collapse;
                background: rgba(7, 19, 50, 0.3);
                border-radius: 12px;
                overflow: hidden;
                box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
                
                thead {
                  background: linear-gradient(135deg, rgba(117, 222, 239, 0.15), rgba(78, 205, 196, 0.1));
                  
                  th {
                    color: #75deef;
                    font-size: 14px;
                    font-weight: bold;
                    padding: 16px 12px;
                    text-align: center;
                    border-bottom: 2px solid #1a3c58;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 6px;
                    
                    :deep(.ivu-icon) {
                      font-size: 14px;
                      color: #4ecdc4;
                    }
                  }
                }
                
                tbody {
                  tr {
                    border-bottom: 1px solid rgba(26, 60, 88, 0.3);
                    transition: all 0.3s ease;
                    
                    &:hover {
                      background: rgba(117, 222, 239, 0.08);
                      transform: translateY(-1px);
                      box-shadow: 0 2px 8px rgba(117, 222, 239, 0.1);
                    }
                    
                    &:last-child {
                      border-bottom: none;
                    }
                    
                    &.high-impact {
                      background: linear-gradient(135deg, rgba(38, 208, 206, 0.1), rgba(38, 208, 206, 0.05));
                      
                      td {
                        color: #26d0ce;
                      }
                    }
                    
                    &.medium-impact {
                      background: linear-gradient(135deg, rgba(117, 222, 239, 0.1), rgba(117, 222, 239, 0.05));
                      
                      td {
                        color: #75deef;
                      }
                    }
                    
                    &.low-impact {
                      background: linear-gradient(135deg, rgba(153, 153, 153, 0.1), rgba(153, 153, 153, 0.05));
                      
                      td {
                        color: #999;
                      }
                    }
                    
                    td {
                      padding: 14px 12px;
                      text-align: center;
                      font-size: 13px;
                      color: #4ecdc4;
                      vertical-align: middle;
                      
                      .impact-badge {
                        display: inline-flex;
                        align-items: center;
                        gap: 6px;
                        padding: 6px 12px;
                        border-radius: 20px;
                        font-weight: bold;
                        font-size: 12px;
                        transition: all 0.3s ease;
                        
                        :deep(.ivu-icon) {
                          font-size: 12px;
                        }
                        
                        &.high {
                          background: linear-gradient(135deg, rgba(38, 208, 206, 0.2), rgba(38, 208, 206, 0.1));
                          border: 1px solid rgba(38, 208, 206, 0.3);
                          color: #26d0ce;
                          
                          &:hover {
                            background: linear-gradient(135deg, rgba(38, 208, 206, 0.3), rgba(38, 208, 206, 0.2));
                            transform: scale(1.05);
                          }
                        }
                        
                        &.medium {
                          background: linear-gradient(135deg, rgba(117, 222, 239, 0.2), rgba(117, 222, 239, 0.1));
                          border: 1px solid rgba(117, 222, 239, 0.3);
                          color: #75deef;
                          
                          &:hover {
                            background: linear-gradient(135deg, rgba(117, 222, 239, 0.3), rgba(117, 222, 239, 0.2));
                            transform: scale(1.05);
                          }
                        }
                        
                        &.low {
                          background: linear-gradient(135deg, rgba(153, 153, 153, 0.2), rgba(153, 153, 153, 0.1));
                          border: 1px solid rgba(153, 153, 153, 0.3);
                          color: #999;
                          
                          &:hover {
                            background: linear-gradient(135deg, rgba(153, 153, 153, 0.3), rgba(153, 153, 153, 0.2));
                            transform: scale(1.05);
                          }
                        }
                      }
                      
                      .score-badge {
                        display: inline-block;
                        padding: 4px 10px;
                        border-radius: 12px;
                        font-weight: bold;
                        font-size: 11px;
                        transition: all 0.3s ease;
                        
                        &.high {
                          background: linear-gradient(135deg, rgba(38, 208, 206, 0.3), rgba(38, 208, 206, 0.2));
                          border: 1px solid rgba(38, 208, 206, 0.4);
                          color: #26d0ce;
                          
                          &:hover {
                            background: linear-gradient(135deg, rgba(38, 208, 206, 0.4), rgba(38, 208, 206, 0.3));
                            transform: scale(1.1);
                          }
                        }
                        
                        &.medium {
                          background: linear-gradient(135deg, rgba(117, 222, 239, 0.3), rgba(117, 222, 239, 0.2));
                          border: 1px solid rgba(117, 222, 239, 0.4);
                          color: #75deef;
                          
                          &:hover {
                            background: linear-gradient(135deg, rgba(117, 222, 239, 0.4), rgba(117, 222, 239, 0.3));
                            transform: scale(1.1);
                          }
                        }
                        
                        &.low {
                          background: linear-gradient(135deg, rgba(153, 153, 153, 0.3), rgba(153, 153, 153, 0.2));
                          border: 1px solid rgba(153, 153, 153, 0.4);
                          color: #999;
                          
                          &:hover {
                            background: linear-gradient(135deg, rgba(153, 153, 153, 0.4), rgba(153, 153, 153, 0.3));
                            transform: scale(1.1);
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      
      .no-data {
        text-align: center;
        color: #999;
        font-style: italic;
        margin-top: 50px;
      }
    }
    
          // 右下：96点电力负荷预测曲线
      .prediction-chart {
        background: rgba(7, 19, 50, 0.6);
        border: 1px solid #1a3c58;
        border-radius: 12px;
        padding: 25px;
        backdrop-filter: blur(10px);
      
      .chart-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        
        h3 {
          color: #75deef;
          font-size: 20px;
          font-weight: bold;
          margin: 0;
        }
        
        .chart-controls {
          :deep(.ivu-btn) {
            background: rgba(117, 222, 239, 0.2);
            border-color: #75deef;
            color: #75deef;
            
            &:hover {
              background: rgba(117, 222, 239, 0.3);
            }
          }
        }
      }
      
              .chart-content {
          width: 100%;
          height: calc(100% - 60px);
          min-height: 400px;
          background: rgba(7, 19, 50, 0.3);
          border-radius: 8px;
        }
    }
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .prediction-overview {
          .main-content {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        height: auto;
        
        .prediction-config,
        .prediction-results,
        .weather-analysis,
        .prediction-chart {
          min-height: 300px;
        }
        
        .prediction-chart .chart-content {
          height: 350px;
        }
      }
  }
}

@media (max-width: 768px) {
  .prediction-overview {
    .page-header {
      h1 {
        font-size: 24px;
      }
    }
    
    .main-content {
      gap: 20px;
      
      .prediction-config,
      .prediction-results,
      .weather-analysis,
      .prediction-chart {
        padding: 20px;
      }
      
      .prediction-results {
        .weather-info {
          grid-template-columns: 1fr;
        }
        
        .load-metrics {
          grid-template-columns: 1fr 1fr;
        }
      }
      
      .prediction-chart .chart-content {
        height: 300px;
      }
    }
  }
}

// 预测历史记录区域样式
.prediction-history-section {
  margin-top: 30px;
  background: rgba(7, 19, 50, 0.6);
  border: 1px solid #1a3c58;
  border-radius: 12px;
  backdrop-filter: blur(10px);
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #75deef, #4ecdc4);
    border-radius: 12px 12px 0 0;
  }
}
</style> 